<template>
    <el-dialog :width="dialog.width || '40%'"
               :visible="dialog.visible"
               :modal-append-to-body="false"
               :close-on-click-modal="false"
               @close="close">
        <div slot="title" class="text-center">
            <span class="font-s20 text-bold">
                <icon name="see-detail"></icon>
                用户详情
            </span>
        </div>
        <el-descriptions class="margin-top" :column="2" size="medium" border>
            <template slot="extra">
                <!--                <el-button type="primary" size="small">操作</el-button>-->
                <el-button-group>
                    <el-button type="primary" size="medium">
                        <icon name="reset-password"></icon>
                        修改密码
                    </el-button>
                    <el-button type="primary" size="medium">
                        <icon name="lock"></icon>
                        锁定账号
                    </el-button>
                </el-button-group>
            </template>
            <!-- uid -->
            <el-descriptions-item>
                <template slot="label">
                    <div class="detail-label">
                        <icon name="id"></icon>
                        ID
                    </div>
                </template>
                {{ personalUser.uid }}
            </el-descriptions-item>
            <!-- 用户名 -->
            <el-descriptions-item>
                <template slot="label">
                    <div class="detail-label">
                        <icon name="user"></icon>
                        用户名
                    </div>
                </template>
                <div class="detail-content">
                    <div class="r-flex">
                        <div class="r-flex__item">
                            <span :class="{'text-info-light': !personalUser.username}">
                                {{ personalUser.username || '无' }}
                            </span>
                        </div>
                        <div class="detail-extra">
                            <el-button type="info" size="mini" icon="el-icon-edit">修改</el-button>
                        </div>
                    </div>
                </div>
            </el-descriptions-item>
            <!-- 手机号 -->
            <el-descriptions-item>
                <template slot="label">
                    <icon name="mobile"></icon>
                    手机号
                </template>
                <div class="detail-content">
                    <div class="r-flex">
                        <div class="r-flex__item">
                            <span :class="{'text-info-light': !personalUser.mobile}">
                                {{ personalUser.mobile || '无' }}
                            </span>
                        </div>
                        <div class="detail-extra">
                            <el-button-group>
                                <el-button type="info" size="mini">
                                    <icon name="edit"></icon>
                                    修改
                                </el-button>
                                <el-button type="info" size="mini" :disabled="!personalUser.is_mobile_bind">
                                    <icon name="unbind"></icon>
                                    解除
                                </el-button>
                            </el-button-group>
                        </div>
                    </div>
                </div>
            </el-descriptions-item>
            <!-- 邮箱 -->
            <el-descriptions-item>
                <template slot="label">
                    <icon name="email"></icon>
                    邮箱
                </template>
                <div class="detail-content">
                    <div class="r-flex">
                        <div class="r-flex__item">
                            <span :class="{'text-info-light': !personalUser.email}">
                                {{ personalUser.email || '无' }}
                            </span>
                        </div>
                        <div class="detail-extra">
                            <el-button-group>
                                <el-button type="info" size="mini">
                                    <icon name="edit"></icon>
                                    修改
                                </el-button>
                                <el-button type="info" size="mini" :disabled="!personalUser.is_email_bind">
                                    <icon name="unbind"></icon>
                                    解除
                                </el-button>
                            </el-button-group>
                        </div>
                    </div>
                </div>
            </el-descriptions-item>
            <!-- QQ -->
            <el-descriptions-item>
                <template slot="label">
                    <icon name="qq"></icon>
                    QQ 绑定
                </template>
                <div class="detail-content">
                    <div class="r-flex">
                        <div class="r-flex__item">
                            <span :class="{'text-info-light': !personalUser.qqopenid}">
                                {{ personalUser.qqopenid || '无' }}
                            </span>
                        </div>
                        <div class="detail-extra">
                            <el-button type="info" size="mini" :disabled="!personalUser.is_qq_bind">
                                <icon name="unbind"></icon>
                                解除
                            </el-button>
                        </div>
                    </div>
                </div>
            </el-descriptions-item>
            <!-- 微信 -->
            <el-descriptions-item>
                <template slot="label">
                    <icon name="wechat"></icon>
                    微信绑定
                </template>
                <div class="detail-content">
                    <div class="r-flex">
                        <div class="r-flex__item">
                            <span :class="{'text-info-light': !personalUser.wechatopenid}">
                                {{ personalUser.wechatopenid || '无' }}
                            </span>
                        </div>
                        <div class="detail-extra">
                            <el-button type="info" size="mini" :disabled="!personalUser.is_wechat_bind">
                                <icon name="unbind"></icon>
                                解除
                            </el-button>
                        </div>
                    </div>
                </div>
            </el-descriptions-item>
            <!-- 微信公众平台 -->
            <el-descriptions-item>
                <template slot="label">
                    <icon name="wechat"></icon>
                    微信公众平台
                </template>
                <div class="detail-content">
                    <div class="r-flex">
                        <div class="r-flex__item">
                            <span :class="{'text-info-light': !personalUser.wechatmpopenid}">
                                {{ personalUser.wechatmpopenid || '无' }}
                            </span>
                        </div>
                        <div class="detail-extra">
                            <el-button type="info" size="mini" :disabled="!personalUser.is_wechat_mp_bind">
                                <icon name="unbind"></icon>
                                解除
                            </el-button>
                        </div>
                    </div>
                </div>
            </el-descriptions-item>
            <!-- 微信 union id -->
            <el-descriptions-item>
                <template slot="label">
                    <icon name="wechat"></icon>
                    微信 union id
                </template>
                <div class="detail-content">
                    <div class="r-flex">
                        <div class="r-flex__item">
                            <span :class="{'text-info-light': !personalUser.wechatunionid}">
                                {{ personalUser.wechatunionid || '无' }}
                            </span>
                        </div>
                        <div class="detail-extra">
                            <el-button type="info" size="mini" :disabled="!personalUser.is_wechat_union_id_bind">
                                <icon name="unbind"></icon>
                                解除
                            </el-button>
                        </div>
                    </div>
                </div>
            </el-descriptions-item>
            <!-- 微信小程序 -->
            <el-descriptions-item>
                <template slot="label">
                    <icon name="mini-program"></icon>
                    微信小程序
                </template>
                <div class="detail-content">
                    <div class="r-flex">
                        <div class="r-flex__item">
                            <el-input v-model="model.api_token" size="mini" placeholder="无" disabled></el-input>
<!--                            <span :class="{'text-info-light': !personalUser.api_token}">-->
<!--                                {{ personalUser.api_token || '无' }}-->
<!--                            </span>-->
                        </div>
                        <div class="detail-extra">
                            <el-button type="info" size="mini" :disabled="!personalUser.is_mini_program_bind">
                                <icon name="unbind"></icon>
                                解除
                            </el-button>
                        </div>
                    </div>
                </div>
            </el-descriptions-item>
            <!-- APP -->
            <el-descriptions-item>
                <template slot="label">
                    <icon name="app"></icon>
                    APP
                </template>
                <div class="detail-content">
                    <div class="r-flex">
                        <div class="r-flex__item">
                            <el-input v-model="model.app_token" size="mini" placeholder="无" disabled></el-input>
                        </div>
                        <div class="detail-extra">
                            <el-button type="info" size="mini" :disabled="!personalUser.is_app_bind">
                                <icon name="unbind"></icon>
                                解除
                            </el-button>
                        </div>
                    </div>
                </div>
            </el-descriptions-item>
            <!-- 注册 IP -->
            <el-descriptions-item>
                <template slot="label">
                    <icon name="time"></icon>
                    注册 IP
                </template>
                <div class="detail-content">
                    {{ personalUser.regip || '无' }}
                </div>
            </el-descriptions-item>
            <!-- 注册时间 -->
            <el-descriptions-item>
                <template slot="label">
                    <icon name="time"></icon>
                    注册时间
                </template>
                <div class="detail-content">
                    {{ personalUser.regtime || '无' }}
                </div>
            </el-descriptions-item>
            <!-- 更新时间 -->
            <el-descriptions-item>
                <template slot="label">
                    <icon name="time"></icon>
                    更新时间
                </template>
                <div class="detail-content">
                    {{ personalUser.updatetime || '无' }}
                </div>
            </el-descriptions-item>
            <!-- 登录 IP -->
            <el-descriptions-item>
                <template slot="label">
                    <icon name="time"></icon>
                    登录 IP
                </template>
                <div class="detail-content">
                    {{ personalUser.last_login_ip || '无' }}
                </div>
            </el-descriptions-item>
            <!-- 登录时间 -->
            <el-descriptions-item>
                <template slot="label">
                    <icon name="time"></icon>
                    登录时间
                </template>
                <div class="detail-content">
                    {{ personalUser.last_login_time || '无' }}
                </div>
            </el-descriptions-item>
        </el-descriptions>
    </el-dialog>
</template>

<script lang="ts">
import { Component, Emit, Prop, Vue } from 'vue-property-decorator'
import { namespace } from 'vuex-class'
import { toJson } from '@/utils'

const module = namespace('cms/personalUser')

@Component
export default class Detail extends Vue {
  @Prop({ type: Object, default: { width: '500px', visible: false } }) dialog!: any

  // Vuex
  @module.State personalUser!: any

  // form 模型
  public model: any = {
    username: '',
    password: '',
    mobile: '',
    email: '',
    api_token: ''
  }

  // 钩子
  created() {
    this.model = toJson(this.personalUser)
  }

  @Emit()
  close(): void {}
}
</script>

<style lang="scss" scoped>
//::v-deep .el-descriptions__body {
//    tr {
//        th {
//            width: 150px;
//        }
//    }
//}
.detail {
    &-label {
        width: 100px;
    }
    &-extra {
        margin-left: 10px;
    }
    //&-content {
    //    max-width: 350px;
    //}
}
</style>
